<template>
  <div>
    <el-breadcrumb  separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
      <el-breadcsrumb-item>库存管理</el-breadcsrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
        <!-- 搜索添加 -->
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input 
                    type="search"
                    placeholder="请输入内容" 
                    class="input-with-select" 
                    v-model="queryTxt"
                    @change="getFruitInfo"
                    
                >
                    <el-button slot="append" icon="el-icon-search" @click="getFruitInfo"></el-button>
                </el-input>
            </el-col>
            <el-col :span="18">
                <el-button type="primary" @click="addVisible=true">添加</el-button>
            </el-col>
        </el-row>
        <!-- 表格数据 -->
        <el-table :data="fruitInfo" style="width: 100%" height="500" >
            <el-table-column fixed prop="id" label="#" ></el-table-column>

            <el-table-column prop="name" label="名称" > </el-table-column>

            <el-table-column prop="purPrice" label="进货价格/元"></el-table-column>

            <el-table-column prop="sellPrice" label="售货价格/元"> </el-table-column>

            <el-table-column prop="store" label="库存/斤" ></el-table-column>

            <el-table-column  label="操作"  >
                
                <template slot-scope="scope">
                    <el-button type="success" size="mini" icon="el-icon-edit" @click="setDialogVisible(scope.row)">修改</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
                </template>
                
            </el-table-column>
        </el-table>

            <!-- 修改数据的对话框 -->
            <el-dialog
                title="修改水果信息"
                :visible.sync="dialogVisible"
                width="30%" 
            >
                    <el-form :model="fruit" label-width="80px">
                        <el-form-item label="水果" prop="name">
                            <el-input  v-model="fruit.name"></el-input>
                        </el-form-item>
                        <el-form-item label="进价" prop="purPrice">
                            <el-input  v-model="fruit.purPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="售价" prop="sellPrice">
                            <el-input  v-model="fruit.sellPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="库存" prop="store">
                            <el-input  v-model="fruit.store"></el-input>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="xiugai()">确 定</el-button>
                    </span>
            </el-dialog>


            <!-- 添加数据的对话框 -->
            <el-dialog
                title="修改水果信息"
                :visible.sync="addVisible"
                width="30%" 
            >
                    <el-form :rules="addFormRules" :model="addfruit" ref="addFormRef" label-width="80px">
                        <el-form-item label="水果" prop="name">
                            <el-input  v-model="addfruit.name"></el-input>
                        </el-form-item>
                        <el-form-item label="进价" prop="purPrice">
                            <el-input  v-model="addfruit.purPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="售价" prop="sellPrice">
                            <el-input  v-model="addfruit.sellPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="库存" prop="store">
                            <el-input  v-model="addfruit.store"></el-input>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">
                    <el-button @click="addVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add">确 定</el-button>
                    </span>
            </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
    data(){
        var checkPrice = (rule, value, callback) => {
            let reg = /^\d{1,3}$/;
            if(reg.test(value)){
                callback()
            }else{
                callback(new Error('请输入合理的价格'))
            }
        }


        return{
            fruitInfo:[],
            queryTxt:'',
            dialogVisible:false,
            addVisible:false,
            fruit:{},
            addfruit:{},
            addFormRules:{
                name:[
                    {requird:true, tigger:blur},
                    {min:1, max:5, message:'必须1到5个字符'}
                ],
                purPrice:[
                    {requird:true, tigger:blur},
                    {validator:checkPrice, trigger:'blur'}
                ],
                sellPrice:[
                    {requird:true, tigger:blur},
                    {validator:checkPrice, trigger:'blur'}
                ],
                store:[
                    {requird:true, tigger:blur},
                    {validator:checkPrice, trigger:'blur'}
                ]
            }
        }
    },
    mounted() {
        this.getFruitInfo()
    },
    created() {
        this.getFruitInfo()
    },
    methods: {
        getFruitInfo(){
            this.$http.get('fruitInfo?q='+this.queryTxt).then( rs => {
                this.fruitInfo = rs.data
            })
        },
        setDialogVisible(row){
            this.dialogVisible = true
            this.fruit = row
            
        },
        xiugai(){
            this.dialogVisible = true
            
            this.$http.put('fruitInfo/'+this.fruit.id, this.fruit).then(rs => {
                if (rs.status !== 200) {
                    return this.$message.error("失败");
                }else{
                    this.$message.success("成功");
                }

            })
            this.dialogVisible = false
        },
        add(){
            this.$refs.addFormRef.validate( valid => {
                if(!valid) return false
                this.$http.post('fruitInfo', this.addfruit).then( rs => {
                    if(rs.status !== 201) {
                    this.$message.error('用户添加失败')
                    }else{
                        this.$message.success('用户添加成功')
                    }
                    this.addVisible=false;
                    this.getFruitInfo();
                    this.addfruit = {}
                })
            })
        },
        
        del(row) {
            this.fruit = row;
            this.$confirm("进行删除用户操作, 是否继续?", "删除用户", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
            })
            .then(() => {
                this.$http.delete(`fruitInfo/${this.fruit.id}`);
                this.getFruitInfo()
                this.$message({
                    type: "success",
                    message: "删除成功!",
                });
                this.getFruitInfo()
            })
            .catch(() => {
                this.getFruitInfo()
                this.$message({
                    type: "info",
                    message: "已取消删除",
                });
            });
        },
    },
    
}
</script>

<style scoped>
.box-breadcrumb{
    margin-top: 5px;
}
.box-card{
    margin-top: 20px;
}
</style>